<template>
  <div>
    <Row :gutter="36">
      <Col span="18">
      <Form :model="formItem" :label-width="80">
        <Form-item label="用户名">
          <Input v-model="formItem.input" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="店铺名称">
          <Input v-model="formItem.input" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="手机号">
          <Input v-model="formItem.input" placeholder="请输入" disabled>
          <Button slot="append" @click="changePhone">修改</Button>
          </Input>
        </Form-item>
        <Form-item label="QQ号">
          <Input v-model="formItem.input" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="微信号">
          <Input v-model="formItem.input" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="选择器">
          <Select v-model="formItem.select" placeholder="请选择">
            <Option value="beijing">北京市</Option>
            <Option value="shanghai">上海市</Option>
            <Option value="shenzhen">深圳市</Option>
          </Select>
        </Form-item>
        <Form-item label="单选框">
          <Radio-group v-model="formItem.radio">
            <Radio label="male">男</Radio>
            <Radio label="female">女</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="服务游戏">
          <Checkbox-group v-model="formItem.checkbox">
            <Checkbox label="3099"></Checkbox>
            <Checkbox label="7505"></Checkbox>
            <Checkbox label="2048"></Checkbox>
            <Checkbox label="欢喜"></Checkbox>
            <Checkbox label="亲朋"></Checkbox>
          </Checkbox-group>
        </Form-item>
        <Form-item label="线上交易">
          <i-Switch v-model="formItem.switch" size="large">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-Switch>
        </Form-item>
        <Form-item label="店铺描述">
          <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                 placeholder="请输入..."></Input>
        </Form-item>
        <Form-item>
          <Button type="primary">提交</Button>
          <Button type="ghost" style="margin-left: 8px">取消</Button>
        </Form-item>
      </Form>
      </Col>
      <Col span="6">
      <Upload
        action="//jsonplaceholder.typicode.com/posts/">
        <div class="cover-box" style="">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff;margin-top: 64px"></Icon>
          <p>点击上传店面图</p>
        </div>
      </Upload>
      <Tag color="green">账号正常</Tag>
      <Rank :rank='5'></Rank>
      <br>

      <Rate show-text v-model="formItem.star" disabled>
        <span style="color: #f5a623">{{ formItem.star }}</span>
      </Rate>
      <h3>注册时间：2016-05-04</h3>
      </Col>
    </Row>

  </div>
</template>

<script>
  import Rank from '@/components/Rank'
  export default {
    name: 'home',
    data () {
      return {
        formItem: {
          input: '',
          select: '',
          radio: 'male',
          star: 3.9,
          checkbox: [],
          switch: true,
          date: '',
          time: '',
          slider: [20, 50],
          textarea: ''
        }
      }
    },
    components: {Rank},
    methods: {
      changePhone () {
        alert('修改手机')
      }
    }
  }
</script>

<style scoped>
  .cover-box {
    width: 168px;
    height: 238px;
    text-align: center;
    border: 1px solid #999;
    cursor: pointer
  }
</style>
